<template>
  <!-- 上下布局 -->
  <el-row
    :gutter="40"
    class="panel-group"
  >
    <el-col
      :xs="12"
      :sm="12"
      :lg="24"
      class="card-panel-col"
    >
      <div class="card-panel-main">
        <div class="top">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon
                icon-class="美元"
                class-name="card-panel-icon"
              />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">平台资金</div>
              <count-to
                :start-val="0"
                :end-val="initData.money"
                :duration="2600"
                class="card-panel-num"
              />
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon
                  icon-class="美元"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">平台总收益</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-message">
                <svg-icon
                  icon-class="美元"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">用户充值金额</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-money">
                <svg-icon
                  icon-class="美元"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">后台充值金额</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-shopping">
                <svg-icon
                  icon-class="美元"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">提现成功金额</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col
      :xs="12"
      :sm="12"
      :lg="24"
      class="card-panel-col"
    >
      <div class="card-panel-main">
        <div class="top">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon
                icon-class="碗具"
                class-name="card-panel-icon"
              />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">总饭局数</div>
              <count-to
                :start-val="0"
                :end-val="initData.money"
                :duration="2600"
                class="card-panel-num"
              />
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon
                  icon-class="碗具"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">已完成饭局数</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-message">
                <svg-icon
                  icon-class="碗具"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">进行中饭局数</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-money">
                <svg-icon
                  icon-class="碗具"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">异常饭局数</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-shopping">
                <svg-icon
                  icon-class="碗具"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">已结算饭局数</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col
      :xs="12"
      :sm="12"
      :lg="24"
      class="card-panel-col"
    >
      <div class="card-panel-main">
        <div class="top">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon
                icon-class="users"
                class-name="card-panel-icon"
              />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">总用户数</div>
              <count-to
                :start-val="0"
                :end-val="initData.money"
                :duration="2600"
                class="card-panel-num"
              />
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon
                  icon-class="users"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">正常用户数</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-message">
                <svg-icon
                  icon-class="users"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">已封禁用户数</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
          <div class="card-panel-item">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-money">
                <svg-icon
                  icon-class="users"
                  class-name="card-panel-icon"
                />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">已注销用户数</div>
                <count-to
                  :start-val="0"
                  :end-val="initData.money"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  props: {
    initData: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }
  .card-panel-main {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 5px;
    .top {
      width: 100%;
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      overflow: hidden;
      color: #666;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
      .card-panel {
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        .card-panel-icon-wrapper {
          margin: 14px 0;
          padding: 16px;
          transition: all 0.38s ease-out;
          border-radius: 6px;
        }
        .card-panel-icon {
          float: left;
          font-size: 48px;
        }

        .card-panel-description {
          font-weight: bold;
          margin: 26px;

          .card-panel-text {
            line-height: 18px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 16px;
            margin-bottom: 12px;
          }

          .card-panel-num {
            font-size: 20px;
          }
        }
      }
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #40c9c6;
        }

        .icon-message {
          background: #36a3f7;
        }

        .icon-money {
          background: #f4516c;
        }

        .icon-shopping {
          background: #34bfa3;
        }
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .card-panel-item {
        width: 20%;
        height: 108px;
        background-color: #fff;
        .card-panel {
          background-color: #ffffff;
          display: flex;
          justify-content: center;
          .card-panel-icon-wrapper {
            margin: 14px 0;
            padding: 16px;
            transition: all 0.38s ease-out;
            border-radius: 6px;
          }
          .card-panel-icon {
            float: left;
            font-size: 48px;
          }

          .card-panel-description {
            font-weight: bold;
            margin: 26px;

            .card-panel-text {
              line-height: 18px;
              color: rgba(0, 0, 0, 0.45);
              font-size: 16px;
              margin-bottom: 12px;
            }

            .card-panel-num {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
  .icon-people {
    color: #40c9c6;
  }

  .icon-message {
    color: #36a3f7;
  }

  .icon-money {
    color: #f4516c;
  }

  .icon-shopping {
    color: #34bfa3;
  }
}
</style>
